<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>#("#")(mainTitle??)</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
#("#")@includeBaseCss()
</head>

<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="page-content">
		<!-- 筛选块-->
		<div class="widget-box">
			<div class="widget-header widget-header-small">
				<h5 class="widget-title lighter">筛选</h5>
			</div>
			<div class="widget-main">
				<div class="row">
					<div class="col-xs-12 col-sm-8">
						<div class="input-group">
							<span class="input-group-addon">
							 	<i class="ace-icon fa fa-check"></i>
							</span>
							 <input type="text" id="name" name="name" class="form-control search-query" placeholder="请输入关键字" /> 
							<span class="input-group-btn">
								<button type="button" id="btn_search" class="btn btn-purple btn-sm">
									<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
									搜索
								</button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 按钮块 -->
		<div class="row">
			<div class="col-xs-12">
				<div class="row-fluid" style="margin-bottom: 5px;">
					<!-- 操作按钮 -->
					<div class="span12 control-group">
						#("#")hasPermission("/#(classNameSmall)/add#(className)")
						<button class="btn btn-primary" id="btn-add">添加</button>
						#("#")end 
						
						#("#")hasPermission("/#(classNameSmall)/add#(className)")
						<button class="btn btn-info" id="btn-edit">修改</button>
						#("#")end
						
						#("#")hasPermission("/#(classNameSmall)/del#(className)")
						<button class="btn btn-danger" id="btn-del">删除</button>
						#("#")end
					</div>
				</div>
			</div>
		</div>
		<!-- /.row -->

		<!--数据 列表-->
		<table id="grid-table"></table>

		<!--分页选择器 -->
		<div id="grid-pager"></div>

	</div>
	<!-- /.page-content -->
</div>
	#("#")@footer()
	<!-- basic scripts -->
	#("#")@includeBaseJs()

	<script type="text/javascript">
		$(document).ready(function() {
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";

			resize(grid_selector);

			$("#grid-table").jqGrid({
				url : "#('#')(ctx)/#(classNameSmall)/getListData",
				mtype : "GET",
				datatype : "json",
				colModel : [ {
					label : '序号',
					name : 'id',
					key : true,
					width : 30,
					sortable : false
				}, {
					label : '普通输入框',
					name : 'remark',
					width : 40,
					sortable : false
				}, {
					label : '下拉选择',
					name : 'status',
					formatter : isStatus,
					width : 30,
					sortable : false
				}, {
					label : '创建时间',
					name : 'create_time',
					width : 30,
					sortable : false
				}, {
					label : '更新时间',
					name : 'update_time',
					width : 30,
					sortable : false
				} ],
				viewrecords : true,
				// 设置当查询记录条数是0的情况下，jqGrid上显示的信息。只有当viewrecords选项设置为true才有效。
				emptyrecords : "未查询到数据",
				height : 280,
				rowNum : 15,
				multiselect : true,//checkbox多选
				altRows : true,//隔行变色
				recordtext : "{0} - {1} 共 {2} 条",
				pgtext : "第 {0} 页 共 {1} 页",
				pager : pager_selector,
				loadComplete : function() {
					var table = this;
					setTimeout(function() {
						updatePagerIcons(table);
					}, 0);
				}
			});

			$(window).triggerHandler('resize.jqGrid');

			//查询按钮
			$("#btn_search").click(function() {
				//此处可以添加对查询数据的合法验证  
				var name = $("#name").val();
				$("#grid-table").jqGrid('setGridParam', {
					datatype : 'json',
					postData : {
						'name' : name
					}, //发送数据  
					page : 1
				}).trigger("reloadGrid"); //重新载入  
			});

			//添加按钮
			$("#btn-add").click(function() {//添加页面
				parent.layer.open({
					title : '添加应用',
					type : 2,//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
					area : [ '770px', '530px' ],//宽高
					fix : false, //不固定
					maxmin : true,//显示最大小化按钮
					content : "#('#')(ctx)/#(classNameSmall)/add#(className)" //iframe的url
				});
			});

			//编辑按钮
			$("#btn-edit").click(function() {//添加页面
				var rid = getOneSelectedRows($("#grid-table"));
				if (rid == -1) {
					layer.msg("请选择一项", {
						icon : 2,
						time : 2000
					//2秒关闭（如果不配置，默认是3秒）
					});
				} else if (rid == -2) {
					layer.msg("只能选择一项", {
						icon : 2,
						time : 2000
					//2秒关闭（如果不配置，默认是3秒）
					});
				} else {
					parent.layer.open({
						title : '修改应用',
						type : 2,
						area : [ '770px', '530px' ],
						fix : false, //不固定
						maxmin : true,
						content : "#('#')(ctx)/#(classNameSmall)/add#(className)?id=" + rid
					});
				}
			});

			//删除按钮
			$("#btn-del").click(function() {
				var rid = getOneSelectedRows($("#grid-table"));
				if (rid == -1) {
					layer.msg("请选择一个应用", {
						icon : 2,
						time : 2000
					//2秒关闭（如果不配置，默认是3秒）
					});
					return;
				}
				
				layer.confirm('确定要删除吗？', {
					icon: 3,
					title:'注意',
					btn: ['确定', '取消'] 
				}, function(index){
					delObj();
					layer.close(index);
				}, function(index){
					 layer.close(index); 
				});
				
			
			});

		});

		//格式化状态显示
		function isStatus(cellvalue, options, rowObject) {
			if (cellvalue == 1) {
				return '<span class="label label-sm label-info">启用</span>';
			} else{
				return '<span class="label label-sm label-important">禁用</span>';
			} 
		}

		function reloadGrid() {
			$("#grid-table").trigger("reloadGrid"); //重新载入
		}
		
		function delObj(){
			
			var submitData = {
				"ids" : getSelectedRows($("#grid-table")) 
			};
			$.post("#('#')(ctx)/#(classNameSmall)/del#(className)", submitData, function(data) {

				if (data.code == 0) {
					layer.msg("删除成功", {
						icon : 1,
						time : 1000
					//1秒关闭（如果不配置，默认是3秒）
					}, function() {
						reloadGrid();
					});

				} else {
					layer.alert("操作失败");
				}
			}, "json");
		}

	</script>

</body>
</html>